
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>基本功能</title>
		<script src="../jquery.js"></script>
		<script src="../ui/om-core.js"></script>
		<script src="../ui/om-panel.js"></script>
		<script src="../ui/om-tabs.js"></script>
		<script type="text/javascript" src="../demos/common/js/themewriter.js"></script>
		<script src="../ui/om-mouse.js"></script>
		<script src="../ui/om-resizable.js"></script>
		<script src="../ui/om-draggable.js"></script>
		<script src="../ui/om-position.js"></script>
		<script src="../ui/om-combo.js"></script>
		<script type="text/javascript" src="../ui/om-button.js"></script>
		<script src="../ui/om-numberfield.js"></script>
		<script src="../ui/om-calendar.js"></script>
		<script type="text/javascript" src="../ui/om-grid.js"></script>
		<script type="text/javascript" src="../ui/om-grid-roweditor.js"></script>

		<link rel="stylesheet" href="../demos/common/css/demo.css">
		<link rel="stylesheet" type="text/css" href="../themes/default/om-all.css" />
		<link rel="stylesheet" type="text/css" href="../themes/default/om-grid-sort.css" />
		<link href="../images/skin.css" rel="stylesheet" type="text/css" />
		<!-- view_source_begin -->
		<script>
	$(function() {
		$('#make-tab').omTabs({
			width : 900,
			height : 700,
			closable : false
		});
	});
</script>
		<!-- view_source_end -->
	<script type="text/javascript">
        $(document).ready(function() {
            $('#grid').omGrid({
                height:480,
                title:'农产品列表',
                dataSource : '/GetFirstProductCategoryServlet.do?operation=getAllFirstCategory',
                colModel : [ 
                            {header : '产品最高级类别', name : 'name', width :'autoExpand', align : 'left',sort:'clientSide'}]
            });
            var dialog = $("#dialog-modal").omDialog({
                width: 350,
                autoOpen : false,
                modal : true,
                resizable : false,
                buttons : {
                    "提交" : function(){
		                submitDialog();
		                return false; //阻止form的默认提交动作
		            },
                    "取消" : function() {
                        $("#dialog-modal").omDialog("close");//关闭dialog
                    }
                }
            });
            
            //显示dialog并初始化里面的输入框的数据
            var showDialog = function(title,rowData){
                rowData = rowData || {};
                $("input[name='id']",dialog).val(rowData.id);
                $("input[name='name']",dialog).val(rowData.name);
                dialog.omDialog("option", "title", title);
                dialog.omDialog("open");//显示dialog
            };
            
            //dialog中点提交按钮时将数据提交到后台并执行相应的add或modify操作
            var submitDialog = function(){
                if (validator.form()) {
	                var submitData={
	                    operation:isAdd?'add':'modify',
	                    id:$("input[name='id']",dialog).val(),
	                    name:$("input[name='name']",dialog).val()
	                };
	                
	                    if(isAdd){
	                    	$.post('../GetFirstProductCatogory.do?operation=add',submitData,function(){
		                        $('#grid').omGrid('reload',1);//如果是添加则滚动到第一页并刷新
		                        $.omMessageTip.show({title: "操作成功", content: "添加类别成功", timeout: 3000});
	                        });
	                    }else{
	                    	$.post('../GetFirstProductCatogory.do?operation=update',submitData,function(){
		                        $('#grid').omGrid('reload');//如果是修改则刷新当前页
		                        $.omMessageTip.show({title: "操作成功", content: "修改类别成功", timeout: 3000});
	                        });
	                    }
	                    dialog.omDialog("close"); //关闭dialog
                }
            };
            
            var isAdd = true; //弹出窗口中是添加操作还是修改操作？
            $('#create').bind('click', function() {
                isAdd = true;
                validator.resetForm();
                showDialog('新增类别');//显示dialog
            });
            $('#modify').bind('click', function() {
                var selections=$('#grid').omGrid('getSelections',true);
                if (selections.length == 0) {
                    alert('请至少选择一行记录');
                    return false;
                }
                isAdd = false;
                showDialog('修改类别',selections[0]);//显示dialog
            });

            $('#delete').bind('click', function(e) {
                var selections=$('#grid').omGrid('getSelections',true);
                if (selections.length == 0) {
                    alert('请至少选择一行记录');
                    return false;
                }
                //将选择的记录的id传递到后台去并执行delete操作
                var toDeleteRecordID=selections[0].id;
                $.post('../GetFirstProductCatogory.do?operation=delete',{operation:'delete',id:toDeleteRecordID},function(){
                    $('#grid').omGrid('reload');//刷新当前页数据
                    $.omMessageTip.show({title: "操作成功", content: "删除农产品成功", timeout: 1500});
                });
            });
            
        	//对表单进行校验
            var validator = $('#userForm').validate({
                rules : {
                    name : {required: true}
                }, 
                messages : {
                    name : {required : "名称不能为空"}
                }
            });
            
        });
    </script>


	</head>
	<body>
		<!-- view_source_begin -->
		<div id="make-tab">
			<ul>
				<li>
					<a href="#tab1">第一层产品类别</a>
				</li>
				<li>
					<a href="#tab2">第二层产品类别</a>
				</li>
				<li>
					<a href="#tab3">第三层产品类别</a>
				</li>
			</ul>
			<div id="tab1">
				<!-- view_source_begin -->
				<div id="demo" style="margin-left: 30px; margin-top: 10px">
					<input type="button" id="add" value="新增" />
					<input type="button" id="del" value="删除" />
					<input type="button" id="save" value="保存修改" />
					<table id="grid"></table>
				</div>
				<!-- view_source_end -->


			</div>
			<div id="tab2">
				&nbsp;&nbsp;&nbsp;&nbsp;C语言是一种计算机程序设计语言。它既具有高级语言的特点，又具有汇编语言的特点。
				它由美国贝尔研究所的D.M.Ritchie于1972年推出。1978后，C语言已先后被移植到大、
				中、小及微型机上。它可以作为工作系统设计语言，编写系统应用程序，也可以作为应
				用程序设计语言，编写不依赖计算机硬件的应用程序。它的应用范围广泛，具备很强的
				数据处理能力，不仅仅是在软件开发上，而且各类科研都需要用到C语言，适于编写系统
				软件，三维，二维图形和动画。具体应用比如单片机以及嵌入式系统开发。
			</div>
			<div id="tab3">
				&nbsp;&nbsp;&nbsp;&nbsp;Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的
				区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，
				为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，
				只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入
				了Javascript，提供了数据验证的基本功能。
			</div>
		</div>
		<!-- view_source_end -->
		<div id="view-desc">
			omTabs的基本功能：各标签页层叠放置，上方有导航条用来切换标签页，closable设成true时所有标签页都可以关闭。
		</div>
	</body>
</html>
